<template>
  <!-- <client-only> -->
  <div
    id="app"
    :class="[isMobile ? '' : 'pc', $route.meta.bg == 'dark' ? 'dark' : '']"
  >
    <div class="mainLayout">
      <van-pull-refresh
        v-if="isMobile && !$route.meta.noRefresh"
        v-model="isLoading"
        @refresh="onRefresh"
      >
        <Nuxt />
      </van-pull-refresh>
      <Nuxt v-else />
    </div>
  </div>
  <!-- </client-only> -->
</template>
<script>
import { PullRefresh, Skeleton } from "vant";
import { isMobile } from "../common/util";

export default {
  name: "default",
  middleware: "loading",
  components: {
    [Skeleton.name]: Skeleton,
    [PullRefresh.name]: PullRefresh
  },
  data() {
    return {
      loading: true,
      isLoading: false,
      isMobile: isMobile()
    };
  },
  mounted() {
    window.onload = function() {
      document.addEventListener("touchstart", function(event) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      });
      document.addEventListener("gesturestart", function(event) {
        event.preventDefault();
      });
    };
    this.loading = false;
  },
  methods: {
    onRefresh() {
      let that = this;
      setTimeout(() => {
        that.isLoading = true;
        that.$router.go(0);
      }, 1000);
    }
  }
};
</script>

<style lang="less" scoped>
.van-skeleton {
  padding: 30px;
}
* {
  -webkit-user-select: none; /*禁用手机浏览器的用户选择功能 */
  -moz-user-select: none;
  -webkit-touch-callout: none;
  -ms-user-select: none; /*IE10*/
  user-select: none;
  outline: none;
}
input,
textarea {
  -webkit-user-select: auto; /*webkit浏览器*/
  outline: none;
}
#app {
  height: 100vh;
  &.dark {
    background: #1e1e1f;
  }
}
.pc {
  overflow-x: hidden;
  // height: auto !important;
}
.mainLayout {
  height: 100%;
  .contain {
    height: 100%;
  }
  .van-pull-refresh {
    ::v-deep .van-pull-refresh__track {
      min-height: 100vh;
    }
  }
}
</style>
